<template>
  <div id="app-vue">
    <div class="header">
      晴天部分评论可视化
    </div>
    <div id="main">
      <!-- 左侧列 -->
      <div class="column">
        <div class="charDiv" style="height: 50%;">
          <Chart1>
            <div class="chartitle">每日的评论数量</div>
          </Chart1>
        </div>
        <div class="charDiv" style="height: 50%;">
          <Chart2>
            <div class="chartitle">用户评论数量</div>
          </Chart2>
        </div>
      </div>

      <div class="column map-column">
         <Chart3 style="height: 100%; width: 100%; position: relative; z-index: 1;"></Chart3>
      </div>

      <!-- 右侧列 -->
      <div class="column">
        <div style="display: flex; height: 40%; gap: 10px;">
          <div class="charDiv" style="flex: 1;">
            <Chart4_1>
              <div class="chartitle">积极情绪</div>
            </Chart4_1>
          </div>
          <div class="charDiv" style="flex: 1;">
            <Chart4_2>
              <div class="chartitle">消极情绪</div>
            </Chart4_2>
          </div>
        </div>
        <div class="charDiv" style="height: 60%;">
          <Chart5>
            <div class="chartitle">热点词云</div>
          </Chart5>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

// 导入新的图表组件
import Chart1 from '../components/Chart1.vue';
import Chart2 from '../components/Chart2.vue';
import Chart3 from '../components/Chart3.vue';
import Chart4_1 from '../components/Chart4_1.vue';
import Chart4_2 from '../components/Chart4_2.vue';
import Chart5 from '../components/Chart5.vue';



</script>

  <style scoped>
  /* --- Base Styles --- */
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  #app-vue {
    text-align: center;
    width: 100%;
    background-image: url("../../public/img/bg.jpg");
    background-size: cover; /* Ensure background covers */
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; /* Cleaner font */
  }
  
  /* --- Header --- */
  .header {
    height: 70px; /* Slightly taller header */
    width: 100%;
    font-size: 2rem; /* Adjusted font size */
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 198, 255, 0.8); /* Glowing text effect */
    background-image: url('../../public/img/head_bg.png');
    background-size: 100% 100%; /* Stretch background */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For potential decorative elements */
    margin-bottom: 10px; /* Space below header */
  }
  
  /* --- Main Layout --- */
  #main {
    display: flex;
    width: 98%;
    height: calc(100vh - 80px); /* Adjusted height considering header margin */
    padding: 0 10px 10px 10px; /* Padding */
    gap: 15px; /* Increased gap */
  }
  
  .column {
    flex: 3; /* Adjust flex ratio */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
  }
  
  .map-column {
    flex: 4; /* Adjust map flex ratio */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Add a subtle border or background to the map container itself */
    background-color: rgba(10, 23, 62, 0.2); /* Dark blue transparent bg */
    border: 1px solid rgba(25, 186, 139, 0.1);
    border-radius: 4px;
  }
  
  /* --- Chart Container Styling (DataV Style) --- */
  .charDiv {
    background-color: rgba(10, 23, 62, 0.4); /* Darker, more transparent background */
    border: 1px solid rgba(25, 186, 139, 0.3); /* Teal border */
    border-radius: 4px;
    position: relative;
    padding: 10px; /* Add padding inside */
    box-shadow: inset 0 0 15px rgba(25, 186, 139, 0.2); /* Inner glow */
    display: flex;
    flex-direction: column;
  }
  
  /* --- Corner Decorations --- */
  .charDiv::before,
  .charDiv::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #0ff; /* Bright cyan for corners */
    border-style: solid;
    border-width: 2px; /* Adjust border width */
  }
  .charDiv::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
  }
  .charDiv::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
  }
  /* Optional: Add other corners */
  /* 注意：由于组件内部结构变化，这里的选择器可能需要调整或移除 */
  /* 如果需要保留边角装饰，最好将它们移到 .charDiv 上，而不是依赖内部 div 结构 */
  /* .charDiv > div:first-child::before, */
  /* .charDiv > div:first-child::after { ... } */
  
  
  /* --- Chart Title --- */
  /* 这个样式现在应用于传入 slot 的 div */
  .chartitle {
    color: #cceeff; /* Lighter blue text */
    font-size: 1rem;
    padding: 5px 15px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px; /* Space below title */
    background: linear-gradient(to right, rgba(10, 23, 62, 0.1), rgba(25, 186, 139, 0.3), rgba(10, 23, 62, 0.1)); /* Subtle gradient background */
  }
  
  /* --- Chart Area --- */
  /* 这些样式不再需要，因为图表区域由组件内部管理 */
  /* .charDiv > div:not(.chartitle):not(.charDiv-footer) { ... } */
  
  /* --- Footer --- */
  .charDiv-footer {
   display: none; /* Hide the simple footer */
  }
  
  /* --- Map Background Image (Optional) --- */
  /* 这个样式不再需要，地图背景由 Chart3 组件内部处理 */
  /* .map-bg-img { ... } */
  
  </style>